<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#header{
		width: 100%;
		height: 60px;
		background: rgb(100,100,100);
		position: relative;
	}
	#header img{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 5px;
	right: 80px;
}
#header #wrap{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 60px;
	right:30px;
	display: none;
}
	#addnewbook{
		font-size:20px;
		position:absolute;
		left:580px;
		top:90px;
		padding:5px 8px;
		background:rgb(100,100,100);
	}
	#refresh{
		font-size: 20px;
		position: absolute;
		left: 680px;
		top: 90px;
		padding: 5px 8px;
		background: rgb(100,100,100);
	}
	#back{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.3);
		display: none;
	}
	#newbook{
		width: 600px;
		height: 400px;
		background: #ccc;
		position: absolute;
		left: 380px;
		top: 80px;
	}

	#newbooktop{
		width: 600px;
		height: 30px;
		line-height: 30px;
		background: rgb(150,150,250);
	}
	#newbooktop span{
		float: right;
		width: 25px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		margin-right:2px; 
		background: rgb(150,150,150);
	}
	#newbookleft{
		float: left;
		width: 300px;
		list-style: none;
		margin-top:10px; 
	}
	#newbookright{
		float:left;
		width: 300px;
		margin-top:10px; 
		list-style: none;
	}
	#newbookleft span,#newbookright span{
		display: inline-block;
		text-align: right;
		width: 80px;
	}
	#newbookleft li,#newbookright li{
		height: 40px;
		line-height: 40px;
		font-size: 16px;
	}
	#newbookleft input,#newbookright input{
		height: 30px;
		width: 180px;
		margin-left:20px; 
		font-size: 16px;
	}
	#addbtn{
		width: 60px;
		height: 25px;
		/*background: black;*/
		float: right;
		margin:5px 60px 0 0; 
	}
	#tab{
		width: 800px;
		margin:150px 0 0 250px;

	}
	tbody{
		text-align: center;
	}
	
	tbody img{
		width: 35px;
		height: 35px;
	}
	#tab .th1{
		width: 50px;
	}
	#tab .th2{
		width: 75px;
	}
	#tab .th3{
		width: 200px;
	}
	#tab .th4{
		width: 150px;
	}
	#tab .th5{
		width: 75px;
	}
	#tab .th6{
		width: 150px;
	}
	#tab .th7{
		width: 100px;
	}
	#tab .th8{
		width: 100px;
	}
	</style>
	</head>
	<body>
		
	<div id="header">
		<img src="../img/user.png"/>
		<div id="wrap">
			<p></p>
			<input type="button" name="" id="" value="注销" />
		</div>
	</div>
	<div id="addnewbook">添加数据</div>
	<div id="refresh">刷新</div>
<!--表单-->
	<div id="back">
		<div id="newbook">
			<div id="newbooktop">
				新建书籍
				<span>-</span>

				<span>c</span>
				<span>x</span>
			</div>
			<ul id="newbookleft">
				<li><span>书名</span><input type="text" id="bookname" name="bookname"></li>
				
				<li><span>价格</span><input type="text" id="price" name="price"></li>
				<li><span>会员价</span><input type="text" id="hyPrice" name="hyPrice"></li>
				
				<li><span>作者</span><input type="text" id="author" name="author"></li>
				<li><span>出版社</span><input type="text" id="publisher" name="publisher"></li>
				<li><span>图片</span><input type="text" name="pic" id="pic" value=""/></li>	
			<button id="addbtn">添加</button>
		</div>
	</div>
	
	
	<table id="tab">
		<thead>
			<tr>
				<th class="th1"><input type="checkbox"/></th>
				<th class="th2">图片</th>
				<th class="th3">书名</th>
				<th class="th4">作者</th>
				<th class="th5">价格</th>
				<th class="th6">会员价</th>
				<th class="th7">出版社</th>
				<th class="th8">操作</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
	<script type="text/javascript">
		console.log(localStorage.name);
	</script>
	</body>
	<script src="../js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tushu.js" type="text/javascript" charset="utf-8"></script>
</html>
